<template>
    <ul class="tag-main" v-if="tags.length">
        <li 
        class="tag-item" 
        v-for="tagItem in initTagList" 
        :key="tagItem.id" 
        @click.stop="goPage(tagItem)">
            <svgIcon iconName="icon-biaoqian1"/>
            <span>{{ tagItem.tagName }}</span>
        </li>
        <el-popover v-if="maxTag" popper-class="more-popper" placement="bottom" trigger="hover">
            <template #reference >
                <div class="more">
                    <svgIcon iconName="icon-gengduo2"/>
                    <span>更多</span>
                </div>
            </template>
            <div class="more-popper-tag" v-for="tagItem in moreTagList" :key="tagItem.id" @click="goPage(tagItem)">
                <svgIcon iconName="icon-biaoqian1"/>
                <span>{{ tagItem.tagName }}</span>
            </div>
        </el-popover>
    </ul>
</template>

<script setup>
import svgIcon from '@/components/system/svgicon/svgicon.vue';
import { useRouter } from 'vue-router';

// ========================= 接收值 =========================
const props = defineProps({
    // 标签列表
    tags: {
        type: Array,
        default: ()=>[]
    },

    // 标签列表大于多少个的时候显示更多
    tagLength: {
        type: Number,
    },

    // 是否需要跳转
    isGoTagPage: {
        type: Boolean,
        default: true
    }
});

// ========================= 计算属性 =========================
// 是否大于限制显示的个数
const maxTag = computed(() => {
    return props.tags.length > props.tagLength;
});

// 不大于时返回初始数组， 大于时返回限制数的前几个
const initTagList = computed(() => {
    if(!maxTag.value) return props.tags;
    return props.tags.slice(0, props.tagLength);
});

//大于时返回限制数的后几个
const moreTagList = computed(() => {
    if(maxTag.value) return props.tags.slice(props.tagLength);
});

// ========================= 路由操作 =========================
const router = useRouter(); // 路由
function goPage(item) {
    if(!props.isGoTagPage) return;
    router.push({
        path: '/article/tag',
        query: {
            id: item.id
        }
    })
};
</script>

<style lang="scss" scoped>
    @import './article-tag.scss';
</style>